<template>
    <view>
        <view v-if="extraInfoLayout === 'normal'" class="list-item">
            <view v-if="imagePosition === 'left'" class="list-cover">
                <image src="/static/logo.png"
                    :style="{ height: imageHeight + 'rpx', width: imageWidth + 'rpx', borderRadius: imageRadius }">
                </image>
            </view>
            <view class="list-title" :style="{ height: imageHeight + 'rpx' }">
                <view class="title" :class="[{ blod: titleBlod }]">{{ title }}</view>
                <view v-if="extraLabelStyle === 'text'" class="extraInfo">
                    <view class="label" :style="{ color: extraLabelColor }">{{ extraLabel }}</view>
                    <view class="division">|</view>
                    <view class="stats-info">
                        <view v-for="item in extraInfo" class="item">{{ item }}</view>
                    </view>
                </view>
                <view v-if="extraLabelStyle === 'fill'" class="extraInfo justify flex items-center">
                    <view class="label">{{ extraLabel }}</view>
                    <view class="stats-info">
                        <view class="stats-info">
                            <view v-for="item in extraInfo" class="item c-999999">{{ item }}</view>
                        </view>
                    </view>
                </view>
                <view v-if="extraLabel === ''" class="extraInfo">
                    <view class="stats-info">
                        <view class="stats-info">
                            <view v-for="item in extraInfo" class="item">{{ item }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="buttonStyleConfig.text !== ''" class="list-button">
                <btn :title="buttonStyleConfig.text" :transition="buttonStyleConfig.transition"
                    :width="buttonStyleConfig.width" :height="buttonStyleConfig.height"
                    :bordeRadius="buttonStyleConfig.radius" :bgColor="buttonStyleConfig.background"
                    :fontSize="buttonStyleConfig.fontSize" :color="buttonStyleConfig.textColor"></btn>
            </view>
            <view v-if="imagePosition === 'right'" class="list-cover">
                <image src="/static/logo.png"
                    :style="{ height: imageHeight + 'rpx', width: imageWidth + 'rpx', borderRadius: imageRadius }">
                </image>
            </view>
        </view>
        <view v-if="extraInfoLayout === 'price'" class="list-item">
            <view v-if="imagePosition === 'left'" class="list-cover">
                <image src="/static/logo.png"
                    :style="{ height: imageHeight + 'rpx', width: imageWidth + 'rpx', borderRadius: imageRadius }">
                </image>
            </view>
            <view class="list-title" :style="{ height: imageHeight + 'rpx' }">
                <view class="title" :class="[{ blod: titleBlod }]">
                    <view>{{ title }}</view>
                    <view class="subtitle">{{ subTitle }}</view>
                </view>
                <view class="extraInfo justify">
                    <view class="price">
                        <view class="current">￥{{ priceInfo.current }}</view>
                        <view class="original">￥{{ priceInfo.original }}</view>
                    </view>
                    <view class="stats-info">
                        <view class="stats-info">
                            <view class="button">
                                <btn :title="buttonStyleConfig.text" :transition="buttonStyleConfig.transition"
                                    :width="buttonStyleConfig.width" :height="buttonStyleConfig.height"
                                    :bordeRadius="buttonStyleConfig.radius" :bgColor="buttonStyleConfig.background"
                                    :fontSize="buttonStyleConfig.fontSize" :color="buttonStyleConfig.textColor"></btn>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="imagePosition === 'right'" class="list-cover">
                <image src="/static/logo.png"
                    :style="{ height: imageHeight + 'rpx', width: imageWidth + 'rpx', borderRadius: imageRadius }">
                </image>
            </view>
        </view>
        <view v-if="extraInfoLayout === 'task'" class="list-item">
            <view v-if="imagePosition === 'left'" class="list-cover">
                <image src="/static/logo.png"
                    :style="{ height: imageHeight + 'rpx', width: imageWidth + 'rpx', borderRadius: imageRadius }">
                </image>
            </view>
            <view class="list-title"
                :style="{ height: imageHeight + 'rpx', display: 'flex', justifyContent: 'center' }">
                <view class="title" :class="[{ blod: titleBlod }]">
                    <view>{{ title }}</view>
                    <view class="task-info" style="margin-top: 3px;">
                        您还有<text class="key">{{ taskInfo.key }}</text>{{ taskInfo.text }}
                    </view>
                </view>
            </view>
            <view v-if="buttonStyleConfig.text !== ''" class="list-button">
                <btn :title="buttonStyleConfig.text" :transition="buttonStyleConfig.transition"
                    :width="buttonStyleConfig.width" :height="buttonStyleConfig.height"
                    :bordeRadius="buttonStyleConfig.radius" :bgColor="buttonStyleConfig.background"
                    :fontSize="buttonStyleConfig.fontSize" :color="buttonStyleConfig.textColor"></btn>
            </view>
            <view v-if="imagePosition === 'right'" class="list-cover">
                <image src="/static/logo.png"
                    :style="{ height: imageHeight + 'rpx', width: imageWidth + 'rpx', borderRadius: imageRadius }">
                </image>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import Btn from '@/components/Button.vue';
    import {
        ListComponentProps,
        defaultListComponentProps
    } from '@/props.ts';
    const props = withDefaults(defineProps<ListComponentProps>(), defaultListComponentProps);
</script>

<style lang="scss" scoped>
    .list-item {
        @include flex-center;

        .list-cover {}

        .list-title {
            @include p_l_r(30rpx);

            @include flex-justify(column);


            .title {
                color: #000;
                font-size: 28rpx;
            }

            .subtitle {
                font-weight: normal;
                font-size: 18rpx;
                color: #aeafb3;
                margin-top: 3px;
            }

            .task-info {
                font-size: 20rpx;
                color: #adaec9;

                .key {
                    color: #ab76f9;
                    @include p_l_r(4rpx);
                }
            }

            .blod {
                font-weight: bold;
            }


            .division {
                color: #343B48;
                @include p_l_r(15rpx)
            }


            .extraInfo {
                font-size: 20rpx;
                // @include flex-center;
                display: flex;


            }

            .price {
                display: flex;
                font-size: 20rpx;

                .current {
                    color: #E64C7F;
                }

                .original {
                    color: #b4b7bf;
                    text-decoration: line-through;
                    margin-left: 12rpx;
                    font-style: italic;

                }
            }

            .stats-info {
                display: flex;
                color: #333A48;

                .item:not(:last-child)::after {
                    content: "·";
                    @include p_l_r(8rpx);
                }
            }

            .justify {
                .label {
                    width: 111rpx;
                    height: 37rpx;
                    border-radius: 13px;
                    background: #EAE5FE;
                    color: #a297d8;
                    @include flex-center;
                }

                @include flex-justify(row);
            }
        }


    }
</style>